<template>
    <section class="content-box">
        <div>
        <!--工具条-->
        <el-col class="toolbar">
            <el-col :span="12">
                <h2>部门</h2>
            </el-col>
            <el-col :span="12">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.name" placeholder="请输入查询项"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" v-on:click="handleFilterd">&nbsp;查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" class="el-icon-plus" @click="handleAdd">&nbsp;新建</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="icon iconfont icon-daochu3" @click="handleExcel">&nbsp;导出</el-button>
                    </el-form-item>
                    <el-form-item>
                        <label for="file" class="label-file"><i class="icon iconfont icon-daoru">&nbsp;导入</i></label>
                        <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
                    </el-form-item>
                </el-form>
            </el-col>
        </el-col>

        <!--列表-->
        <el-table :data="tableData" class="indexList" highlight-current-row>
            <el-table-column prop="Code" label="部门编码" sortable width="150">
            </el-table-column>
            <el-table-column prop="ShortName" label="部门名称" sortable show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="MANAGER" label="主负责人" sortable show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="ASSISTANTMANAGER" label="副负责人" sortable >
            </el-table-column>
            <!-- <el-table-column prop="paymentdays" label="账期" width="80">
            </el-table-column> -->
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button-group>
                        <!-- <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button> -->
                        <el-button size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="addForm" :label-width="formLabelWidth" ref="addForm">
                <!-- <el-form-item label="部门编码：" prop="Custom_Name">
                    <el-input class="dpcode" v-model="addForm.Custom_Name" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="部门名称：" prop="Custom_Adress">
                    <el-input class="dpcode" v-model="addForm.Custom_Adress" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="上级部门：">
                    <el-select class="dpcode" filterable v-model="addForm.Company" placeholder="请选择上级部门">
                        <el-option v-for="item in Company" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主负责人：">
                    <el-select class="dpcode" filterable v-model="addForm.Person" placeholder="请选择主负责人">
                        <el-option v-for="item in Person" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="副负责人：">
                    <el-select class="dpcode" filterable v-model="addForm.Vperson" placeholder="请选择副负责人">
                        <el-option v-for="item in Person" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!--编辑界面-->
        <!-- <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="editForm" :label-width="formLabelWidth" ref="editForm">
                <el-form-item label="客户名称：" prop="Custom_Name">
                    <el-input v-model="editForm.Custom_Name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址：">
                    <el-input v-model="editForm.Custom_Adress" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：">
                    <el-input v-model="editForm.Custom_Linkman_Tel" auto-complete="off"></el-input>
                </el-form-item>
                <! <el-form-item label="账期：">
                    <el-input v-model="editForm.paymentdays" auto-complete="off"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="客户类型：">
                    <el-select v-model="editForm.Custom_Type" placeholder="请选择客户类型">
                        <el-option v-for="(item,index) in options" :key="index" :label="item.Key" :value="item.Value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog> --> 

        <!--导出-->
        <el-dialog title="导出Excel数据" :visible.sync="excelVisible" :modal-append-to-body="false" size="tiny">
            <el-form ref="excelForm" :model="excelForm" label-width="80px">
                <el-form-item label="请选择要导出的字段：">
                    <el-checkbox v-model="excelForm.Custom_Code">客户编号</el-checkbox>
                    <el-checkbox v-model="excelForm.Custom_Name">客户名称</el-checkbox>
                    <el-checkbox v-model="excelForm.Custom_Adress">地址</el-checkbox>
                    <el-checkbox v-model="excelForm.Custom_Linkman_Tel">联系电话</el-checkbox>
                    <!-- <el-checkbox v-model="excelForm.Paymentdays">账期</el-checkbox> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="excelVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="excelSubmit">确 定</el-button>
            </div>
        </el-dialog>
        </div>
    </section>
</template>
<script>
/* import axios from '../../util/axios'; */
import qs from 'qs';
export default {
    name: 'Client',
    data() {
        return {
            tableData: [],//数据列表
            addFormVisible: false, //新增界面是否显示
            editFormVisible: false, //编辑界面是否显示
            excelVisible: false, //Excel界面是否显示
            formLabelWidth: '120px',//input输入框宽度
            total: 0, //数据总数
            rows: 100, //每页显示多少条
            currentPage: 1,//当前页数   
            Company:'',//上级部门
            Person:'',//负责人   
            loading: false,
            file: '',
            filters: { //查询项
                name: '',
            },
            options: [],//新增界面数据
            //Excel界面
            excelForm: {
                Custom_Code:'',
                Custom_Name:'',
                Custom_Adress:'',
                Custom_Linkman_Tel:'',
                // Paymentdays:0
            },
            //新增界面数据
            addForm: {
                Company:'',//上级部门
                Person:'',//负责人
                Vperson:'',//副负责人
                Custom_Name: '',//客户名称
                Custom_Adress: '',//客户地址
                Custom_Linkman: '',//联系人
                Custom_Linkman_Tel: '',//联系电话
                // Paymentdays: 0,//账期
                Custom_Type: ''//客户类型
            },
            //编辑界面数据
            // editForm: {
            //     Custom_Name: '',//客户名称
            //     Custom_Adress: '',//客户地址
            //     Custom_Linkman: '',//联系人
            //     Custom_Linkman_Tel: '',//联系电话
            //     // paymentdays: 0,//账期
            //     Custom_Type: '',//客户类型
            //     key: ''
            // },
            fileList: []
        }
    },
    methods: {
        changePage(page) {
            this.currentPage = page;
            this.getList();
        },
        getCompany(){//上级部门
            axios.post("getDepartmentsWithCompanyId").then( res=>{
                    console.log(res)
                    this.Company = res;
                    const Company = this.Company;
			        
			    })
			    .catch(error=>{
			    	// console.log(error);  
			    });	
        },

        getPerson(){//主或副负责人
            axios.post("getUserList").then( res=>{
                    console.log(res);
                    this.Person = res;
                    const Person = this.Person;
			        
			    })
			    .catch(error=>{
			    	// console.log(error);  
			    });	
        },

        update(e) {//导入
            let file = e.target.files[0];
            let param = new FormData(); //创建form对象
            param.append('file', file, file.name);//通过append向form对象添加数据
            param.append('chunk', '0');//添加form表单中其他数据
            console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            };  //添加请求头
            axios.post('importCustomer', param, config)
                .then(response => {
                this.$message({
                    message: `导入成功！`,
                    type: 'success'
                });
            })
        },
        async getList() { //异步获取客户列表   
            this.loading = true;
            const res = await axios.post("getDepartmentList", {
                page: this.currentPage,  //当前页数， 
                rows: this.rows, // 每页多少条
            })
            // console.log(res);
            this.total = res.total;
            this.tableData = res; //客户列表渲染到表格上
            this.loading = true;
        },
        /**
         * 查询项
         */
        handleFilterd() {
            var filterName = { "groupOp": "OR", "rules": [{ "field": "Custom_Name", "op": "cn", "data": this.filters.name }, { "field": "Custom_Adress", "op": "cn", "data": this.filters.name }], "groups": [] };
            axios.post("getDepartmentList", { filter: JSON.stringify(filterName) }).then(data => {
                this.tableData = data.rows;
            }).catch(err => {
                console.log(err);
            })
        },
        getType() {//异步请求获取供应商类型
            axios.post("typeCustomer").then(data => {
                this.options = data;
                // console.log(this.options,'options');
            })
        },
        handleAdd() {//显示新增界面
            this.addFormVisible = true;
            this.addForm = {
                Company:'',//上级部门
                Person:'',//负责人
                Custom_Name: '',
                Custom_Adress: '',
                Custom_Linkman: '',
                Custom_Linkman_Tel: '',
                // Paymentdays: '',
                Custom_Type: ''
            };
        },

        //编辑
        // editSubmit() {
        //     this.$refs.editForm.validate((valid) => {
        //         if (valid) {
        //             this.$confirm('确认提交吗？', '提示', {}).then(() => {
        //                 let para = Object.assign({ key: this.editForm.ID }, this.editForm);
        //                 axios.post("editCustomer", para).then((res) => {
        //                     this.$message({
        //                         message: `编号` + para.Custom_Code + `   修改成功！！`,
        //                         type: 'success'
        //                     });
        //                     this.$refs['editForm'].resetFields();
        //                     this.editFormVisible = false;
        //                     this.getList();
        //                 });
        //             });
        //         }
        //     });
        // },
        handleExcel(){//打开Excel窗口
            this.excelVisible = true;
        },
        excelSubmit: function() {   //提交Excel表单
            this.$confirm('确认提交excel表单吗？','提示',{}).then(() => {              
                axios.get("exportCommon",{
                    tableName:'Base_Custom',
                    fields:'Custom_Code,Custom_Name,Custom_Adress,Custom_Linkman_Tel,paymentdays',
                    filters:'',
                    sortField:'Custom_Code',
                    SelectName:'Custom_Code|客户编号§Custom_Name|客户名称§Custom_Adress|地址§Custom_Linkman_Tel|联系电话§paymentdays|账期'
                }).then((res) => {
                    console.log(res);
                    this.excelVisible = false;//关闭窗口
                    this.$refs['excelForm'].resetFields();
                })
            })
        },
        //新增
        addSubmit: function() { //提交表单
            this.$refs.addForm.validate((valid) => {//验证
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        let para = Object.assign({}, this.addForm);//拷贝对象进去
                        axios.post("addCustomer", para).then((res) => { //axios
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            this.addFormVisible = false;//关闭窗口
                            this.getList();//重新刷新列表
                            this.$refs['addForm'].resetFields();
                        });
                    });
                }
            });
        },
        // handleEdit: function(key, row) {//显示编辑界面
        //     this.editFormVisible = true;
        //     this.editForm = Object.assign({}, row);
        // },
        handleDel: function(key, row) {//删除         
            console.log(key, row);
            this.$confirm('确认删除该信息吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let para = {
                    code: row.Custom_Code,
                    key: row.ID
                };
                console.log(para);
                axios.post('deleCustomer', para).then((res) => {
                    this.$message({
                        message: `编号` + para.code + `   删除成功！！！`,
                        type: 'success'
                    });
                    this.getList();
                });
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    mounted() {
        this.getList();//初始化页面时候就要率先执行获取列表类型接口
        this.getType();//初始化页面时候就要率先执行获取供应商类型接口
        this.getCompany();//获取上级部门
        this.getPerson();//获取负责人
    }
}
</script>

<style scoped lang="scss">
@import '../../common/css/index.css';
label.label-file{
    margin:0;   
}
.dpcode{
    width: 80%;
}

</style>

